<!-- plugin, stylesheet -->
<link rel="stylesheet" href="./css/AASlideScroller.css" media="screen">

<!-- jQuery, addons -->
<script src="js/jquery.js"></script>

<!-- jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

<!-- plugin, addons -->
<script src="js/AASlideScroller.class.js"></script>

<!-- javascript, inline code -->
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#firstSlider').AASlideScroller({
			animationSpeed: 350,						
			autoplay:true,
			gridWidth: 220,
			slideWidth: 210,
			easing: 'easeInSine',
			gridElm: '.horizontal-slider',
		});
	});
</script>

<style>
	body {
		margin: 0px;
		padding: 0px;
	}
	#firstSlider {
		width: 220px;
	}
</style>

<!-- AA-slider-scroller -->
<div class="AA-slider-scroller" id="firstSlider">
	<div class="horizontal-slider">
		<div class="content">
			<ul class="promo-item">
				<li>
					<a href="#">
						<p class="img"><img src="assets/owl.png" alt="owl" /></p>
						<div class="description">
							<h3>Artwork - Owl</h3>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/woman.png" alt="VAIO Z Laptop" /></p>
						<div class="description">
							<h3>Fantasy woman</h3>
							<p> Nunc sit amet dui arcu, aliquam lacinia tortor.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/dragon.png" alt="dragon" /></p>
						<div class="description">
							<h3>Dragon Artwork!</h3>
							<p>Donec sit amet nulla massa, convallis imperdiet nunc</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/boy.png" alt="VAIO Z Laptop" /></p>
						<div class="description">
							<h3>Boy with a light</h3>
							<p>Aliquam pharetra sapien vel risus convallis non lacinia ipsum scelerisque. </p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/woman2.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Beautiful woman</h3>
							<p> Duis quam ante, blandit ut hendrerit sed, ultricies id sem.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/girl.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Girl</h3>
							<p>Suspendisse laoreet consequat magna, ut mollis quam porttitor at. </p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/doctor.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Need a doctor?</h3>
							<p>Aenean et euismod eros.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/littlemonster.png" alt="littlemonster" /></p>
						<div class="description">
							<h3>Little monster</h3>
							<p>Aliquam tellus ante, ornare a accumsan viverra, porta ac libero. </p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/girllove.png" alt="Sony Entertainment Network" /></p>
						<div class="description">
							<h3>Loving girl</h3>
							<p> Vivamus rutrum est sed tellus auctor venenatis vitae in leo.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/fish.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Fish?!</h3>
							<p>Duis massa libero, scelerisque sit amet ullamcorper eu, sodales in libero. </p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/girl1.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Another lovely girl</h3>
							<p>Vivamus molestie tempus cursus. In sit amet auctor dolor.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/doll.png" alt="Easier ways to earn points. Get rewarded." /></p>
						<div class="description">
							<h3>Doll</h3>
							<p> Ut at lorem at ante imperdiet dignissim.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/robot.png" alt="Sony Entertainment Network" /></p>
						<div class="description">
							<h3>ROBOT!</h3>
							<p> Nam vel mauris vitae massa commodo placerat.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/lobster.png" alt="lobster" /></p>
						<div class="description">
							<h3>Lobster</h3>
							<p>Sed lorem tortor, posuere sit amet ullamcorper ut, aliquet sit amet nibh.</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<p class="img"><img src="assets/christmas.png" alt="VAIO Z Laptop" /></p>
						<div class="description">
							<h3>Christmas!</h3>
							<p>Sed lorem tortor, posuere sit amet ullamcorper ut, aliquet sit amet nibh. </p>
						</div>
					</a>
				</li>
			</ul>
		</div>

		<div style="clear: both;"></div>
		
	<div class="scroll-bar">		<div class="content">			<a href="#" class="arrow-left">prev</a>						<span class="slide"></span>			<div class="slider-wrapper">				<div class="slide-btn ui-slider-handle">					<span class="left"></span>					<span class="middle"></span>					<span class="right"></span>				</div>			</div>			<a href="#" class="arrow-right">prev</a>		</div>	</div>
		
	</div>
	<!--end .horizontal-slider-->
</div>
<!--end .AA-slider-scroller -->